<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="width:100%;">
                <el-col>
                    <div ref="buttondiv">
                        <vxe-toolbar>
                            <template v-slot:buttons>
                                <table>
                                    <tr>
                                        <td>报告单元</td>
                                        <td>
                                            <rm-ddl-rptunit prgno="MNG139" v-model="rptunitid" @change="unitchange" :appendtobody="true" width="200px" :defaultflag="'1'"></rm-ddl-rptunit>
                                        </td>
                                        <td width="2000px"></td>
                                        <td>
                                            <el-button @click="SetDefaultMenu(rptunitid)" icon="el-icon-setting">设为基准</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="QueryMenu(rptunitid)" icon="el-icon-search">查询</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="AddRecord()" icon="el-icon-plus">新增</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="DelRecord()" icon="el-icon-delete">删除</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="SaveRecord()" icon="el-icon-files">保存</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="CopyShow = true, rptunitidcopy = ''" icon="el-icon-files">复制</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="SetUp($refs.xTable)" icon="el-icon-top">上移</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="SetDown($refs.xTable)" icon="el-icon-bottom">下移</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="SetFirst($refs.xTable)" icon="el-icon-sort-up">首位</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="SetLast($refs.xTable)" icon="el-icon-sort-down">末位</el-button>
                                        </td>
                                    </tr>
                                </table>
                            </template>
                        </vxe-toolbar>
                    </div>
                </el-col>
            </div>

        </div>
        <div class="pagecenter">
            <div style="height: 100%">
                <vxe-table :data.sync="tableData" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon: false}" :loading="loading" @current-change="currentChangeEvent" height="auto" highlight-current-row resizable border header-align="center" show-overflow="tooltip" show-header-overflow="tooltip" size="mini" stripe ref="xTable">
                    <vxe-table-column field="menuevent" title="菜单方法" width="200px" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
                    <vxe-table-column field="menuextname" title="原始名称" width="200px" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
                    <vxe-table-column field="menuname" title="菜单名称" :edit-render="{name: 'input', autoselect: true}" width="200px"></vxe-table-column>
                    <vxe-table-column field="menukey" title="快捷键" :edit-render="{name: 'input', autoselect: true}" width="80px" align="center"></vxe-table-column>
                    <vxe-table-column field="menuicon" title="图标" :edit-render="{name: 'input', autoselect: true, events: { click: MenuIconClick } }" width="120px" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="menulevel" title="菜单级别" width="260px">
                        <template v-slot="{ row }">
                            <el-radio-group v-model="row.menulevel">
                                <el-radio :label="1">一级菜单</el-radio>
                                <el-radio :label="2">二级菜单</el-radio>
                                <el-radio :label="0">隐藏</el-radio>
                            </el-radio-group>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="menuseq" title="序号" width="60px" align="center"></vxe-table-column>
                    <vxe-table-column field="menunote" title="帮助说明" :edit-render="{name: 'input', autoselect: true}" width="160px"></vxe-table-column>
                    <vxe-table-column field="userdefinemenu" title="用户自定义功能" :edit-render="{ name: 'input', autoselect: true, events: { click: userDefineMenuClick } }" width="200px"></vxe-table-column>
                </vxe-table>
            </div>
        </div>

        <el-dialog v-el-drag-dialog :close-on-click-modal="false" title="复制" :visible.sync="CopyShow" v-if="CopyShow" width="500px">
            <table>
                <tr>
                    <td style="text-align:right">
                        当前报告单元:
                    </td>
                    <td>
                        <rm-ddl-rptunit prgno="MNG139" v-model="rptunitid" :appendtobody="true" width="300px" :defaultflag="'1'" :disabled="true"></rm-ddl-rptunit>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:right">
                        复制到：
                    </td>
                    <td>
                        <el-select v-model="rptunitidcopy" @dblclick.native="popMultipleChk(rptunitidcopy)" placeholder="请双击多选要复制到哪些报告单元" filterable clearable style="width:100%">
                            <el-option v-for="(item,index) in rptunitOption" :key="index" :value="item.data" :label="item.display"></el-option>
                        </el-select>
                        <!-- <rm-ddl-rptunit prgno="MNG139" v-model="rptunitidcopy" :appendtobody="true" width="200px" :defaultflag="'1'"></rm-ddl-rptunit> -->
                    </td>
                </tr>
            </table>
            <div style="text-align:right">
                <span class="dialog-footer" slot="footer">
                    <el-button @click="Copy()">确 定</el-button>
                    <el-button @click="CopyShow=false">取 消</el-button>
                </span>
            </div>
        </el-dialog>

        <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="报告单元" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
            <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"></rm-SqlMultiple>
        </el-dialog>
        <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="文字编辑" :visible.sync="userDefineFunctionVisible" :destroy-on-close="true">
            <div style="margin-bottom:20px;"><span style="color:blue;font-weight:bold;">用户自定义命令维护</span></div>
            <div>
                <textarea rows="10" style="width:100%" v-model="userDefineFunctionText"></textarea>
            </div>
            <div style="border:solid grey 1px;margin-top:10px;">
                配置方法和"查看病人病历"接口方法类似。配置为一段命令行，可代入参数，系统会通过运行的方式来运行配置的这段命令。
                <br>正常以浏览器的方式运行，也就是打开网页，若以@CMD@开头，则会直接命令行运行，也就是运行指定的exe。
                <br>入参使用"[lab_report表字段名]的格式来表示，[currentuserno]表示当前登录人工号(打开网页时需要根据需要自己设置user字段名)。
                <br>例如：@CMD@ test.exe [barcode] [pat_no] [currentuserno]
                <br>http://www.baidu.com?barcode=[barcode]&pat_no=[pat_no]&user=[currentuserno]
            </div>
            <div style="text-align:right">
                <span class="dialog-footer" slot="footer">
                    <el-button @click="UserDefineConfirm()">确 定</el-button>
                    <el-button @click="userDefineFunctionVisible=false">取 消</el-button>
                </span>
            </div>
        </el-dialog>
        <el-dialog title="图标库" :visible.sync="iconDialogVisible" width="600px;">
            <ul class="icon-list">
                <li v-for="item in iconList" :key="item" @click="SelectIcon(item)"><span><i :class="item"></i><span class="icon-name">{{item}}</span></span></li>
            </ul>
        </el-dialog>
    </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
    name: "MNG139",
    data() {
        return {
            rptunitid: 0,
            tableData: [],
            loading: false,
            DelIndex: -1,
            currentindex: 0,
            CopyShow: false,
            rptunitidcopy: "",
            //多选弹窗
            dialogMultipleVisible: false,
            option1: [],
            option2: [],
            fieldname: "rptunitid",
            rptunitOption: [],
            userDefineFunctionVisible: false,
            userDefineFunctionText: "",
            iconDialogVisible: false,
            iconList: ["el-icon-platform-eleme","el-icon-eleme","el-icon-delete-solid","el-icon-delete","el-icon-s-tools","el-icon-setting","el-icon-user-solid","el-icon-user","el-icon-phone","el-icon-phone-outline","el-icon-more","el-icon-more-outline","el-icon-star-on","el-icon-star-off","el-icon-s-goods","el-icon-goods","el-icon-warning","el-icon-warning-outline","el-icon-question","el-icon-info","el-icon-remove","el-icon-circle-plus","el-icon-success","el-icon-error","el-icon-zoom-in","el-icon-zoom-out","el-icon-remove-outline","el-icon-circle-plus-outline","el-icon-circle-check","el-icon-circle-close","el-icon-s-help","el-icon-help","el-icon-minus","el-icon-plus","el-icon-check","el-icon-close","el-icon-picture","el-icon-picture-outline","el-icon-picture-outline-round","el-icon-upload","el-icon-upload2","el-icon-download","el-icon-camera-solid","el-icon-camera","el-icon-video-camera-solid","el-icon-video-camera","el-icon-message-solid","el-icon-bell","el-icon-s-cooperation","el-icon-s-order","el-icon-s-platform","el-icon-s-fold","el-icon-s-unfold","el-icon-s-operation","el-icon-s-promotion","el-icon-s-home","el-icon-s-release","el-icon-s-ticket","el-icon-s-management","el-icon-s-open","el-icon-s-shop","el-icon-s-marketing","el-icon-s-flag","el-icon-s-comment","el-icon-s-finance","el-icon-s-claim","el-icon-s-custom","el-icon-s-opportunity","el-icon-s-data","el-icon-s-check","el-icon-s-grid","el-icon-menu","el-icon-share","el-icon-d-caret","el-icon-caret-left","el-icon-caret-right","el-icon-caret-bottom","el-icon-caret-top","el-icon-bottom-left","el-icon-bottom-right","el-icon-back","el-icon-right","el-icon-bottom","el-icon-top","el-icon-top-left","el-icon-top-right","el-icon-arrow-left","el-icon-arrow-right","el-icon-arrow-down","el-icon-arrow-up","el-icon-d-arrow-left","el-icon-d-arrow-right","el-icon-video-pause","el-icon-video-play","el-icon-refresh","el-icon-refresh-right","el-icon-refresh-left","el-icon-finished","el-icon-sort","el-icon-sort-up","el-icon-sort-down","el-icon-rank","el-icon-loading","el-icon-view","el-icon-c-scale-to-original","el-icon-date","el-icon-edit","el-icon-edit-outline","el-icon-folder","el-icon-folder-opened","el-icon-folder-add","el-icon-folder-remove","el-icon-folder-delete","el-icon-folder-checked","el-icon-tickets","el-icon-document-remove","el-icon-document-delete","el-icon-document-copy","el-icon-document-checked","el-icon-document","el-icon-document-add","el-icon-printer","el-icon-paperclip","el-icon-takeaway-box","el-icon-search","el-icon-monitor","el-icon-attract","el-icon-mobile","el-icon-scissors","el-icon-umbrella","el-icon-headset","el-icon-brush","el-icon-mouse","el-icon-coordinate","el-icon-magic-stick","el-icon-reading","el-icon-data-line","el-icon-data-board","el-icon-pie-chart","el-icon-data-analysis","el-icon-collection-tag","el-icon-film","el-icon-suitcase","el-icon-suitcase-1","el-icon-receiving","el-icon-collection","el-icon-files","el-icon-notebook-1","el-icon-notebook-2","el-icon-toilet-paper","el-icon-office-building","el-icon-school","el-icon-table-lamp","el-icon-house","el-icon-no-smoking","el-icon-smoking","el-icon-shopping-cart-full","el-icon-shopping-cart-1","el-icon-shopping-cart-2","el-icon-shopping-bag-1","el-icon-shopping-bag-2","el-icon-sold-out","el-icon-sell","el-icon-present","el-icon-box","el-icon-bank-card","el-icon-money","el-icon-coin","el-icon-wallet","el-icon-discount","el-icon-price-tag","el-icon-news","el-icon-guide","el-icon-male","el-icon-female","el-icon-thumb","el-icon-cpu","el-icon-link","el-icon-connection","el-icon-open","el-icon-turn-off","el-icon-set-up","el-icon-chat-round","el-icon-chat-line-round","el-icon-chat-square","el-icon-chat-dot-round","el-icon-chat-dot-square","el-icon-chat-line-square","el-icon-message","el-icon-postcard","el-icon-position","el-icon-turn-off-microphone","el-icon-microphone","el-icon-close-notification","el-icon-bangzhu","el-icon-time","el-icon-odometer","el-icon-crop","el-icon-aim","el-icon-switch-button","el-icon-full-screen","el-icon-copy-document","el-icon-mic","el-icon-stopwatch","el-icon-medal-1","el-icon-medal","el-icon-trophy","el-icon-trophy-1","el-icon-first-aid-kit","el-icon-discover","el-icon-place","el-icon-location","el-icon-location-outline","el-icon-location-information","el-icon-add-location","el-icon-delete-location","el-icon-map-location","el-icon-alarm-clock","el-icon-timer","el-icon-watch-1","el-icon-watch","el-icon-lock","el-icon-unlock","el-icon-key","el-icon-service","el-icon-mobile-phone","el-icon-bicycle","el-icon-truck","el-icon-ship","el-icon-basketball","el-icon-football","el-icon-soccer","el-icon-baseball","el-icon-wind-power","el-icon-light-rain","el-icon-lightning","el-icon-heavy-rain","el-icon-sunrise","el-icon-sunrise-1","el-icon-sunset","el-icon-sunny","el-icon-cloudy","el-icon-partly-cloudy","el-icon-cloudy-and-sunny","el-icon-moon","el-icon-moon-night","el-icon-dish","el-icon-dish-1","el-icon-food","el-icon-chicken","el-icon-fork-spoon","el-icon-knife-fork","el-icon-burger","el-icon-tableware","el-icon-sugar","el-icon-dessert","el-icon-ice-cream","el-icon-hot-water","el-icon-water-cup","el-icon-coffee-cup","el-icon-cold-drink","el-icon-goblet","el-icon-goblet-full","el-icon-goblet-square","el-icon-goblet-square-full","el-icon-refrigerator","el-icon-grape","el-icon-watermelon","el-icon-cherry","el-icon-apple","el-icon-pear","el-icon-orange","el-icon-coffee","el-icon-ice-tea","el-icon-ice-drink","el-icon-milk-tea","el-icon-potato-strips","el-icon-lollipop","el-icon-ice-cream-square","el-icon-ice-cream-round"],//element图标库大全
        };
    },
    computed: {},
    watch: {},
    created() {
        this.InitOptions();
    },
    mounted() {},
    updated() {},
    methods: {
        InitOptions() {
            this.$tool
                .request({
                    url: "MNG/MNG1/MNG139",
                    method: "post",
                    data: {
                        action: "initOption"
                    }
                })
                .then(res => {
                    this.rptunitOption = res.rptunitOption;
                });
        },
        unitchange(val) {
            this.QueryMenu(val);
        },
        QueryMenu(id) {
            var rptid = id;
            if (!rptid) rptid = 0;
            this.$tool
                .request({
                    url: "MNG/MNG1/MNG139",
                    method: "post",
                    data: {
                        action: "query",
                        rptunitid: rptid
                    }
                })
                .then(res => {
                    if (res.Data && res.Data.length > 0) {
                        this.tableData = this.DealData(res.Data);
                    } else if (res.Data1 && res.Data1.length > 0) {
                        this.$refs.xTable.loadData([]).then(() => {
                            this.$refs.xTable.insert(this.DealData(res.Data1));
                        });
                        //this.tableData = res.Data1;
                    } else this.tableData = [];
                    //this.Options.rptunitvsallhospreqitem = "1";
                });
        },
        SetDefaultMenu(rptunitid) {
            if(rptunitid){
                this.$tool
                .request({
                    url: "MNG/MNG1/MNG139",
                    method: "post",
                    data: {
                        action: "defaultsetting",
                        rptunitid: rptunitid
                    }
                })
                .then(res => {
                    if(res.flag== "1") {
                        this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            }
        },
        AddRecord() {
            var length = this.$refs.xTable.tableFullData.length;
            var row = { rptunitid: this.rptunitid ? this.rptunitid : 0, menuevent: "", menuname: "", menukey: "", menulevel: 1, menuseq: (length + 1) * 10, menunote: "",userdefinemenu: "" };
            this.$refs.xTable.insertAt(row, -1).then(rows => {
                this.$refs.xTable.setCurrentRow(rows.row);
                this.currentindex = length;
            });
        },
        DelRecord() {
            this.$confirm("确定删除这个菜单?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$table.DelRecordSelect(this.$refs.xTable, this.DelIndex, this);
                this.currentindex = this.DelIndex;
            });
        },
        SaveRecord() {
            for (let i = 0; i < this.$refs.xTable.tableData.length; i++) {
                this.$refs.xTable.tableData[i].menuseq = (i + 1) * 10;
            }
            var urec = this.$refs.xTable.getRecordset();
            this.$tool
                .request({
                    url: "MNG/MNG1/MNG139",
                    method: "post",
                    data: {
                        action: "save",
                        rptunitid: this.rptunitid ? this.rptunitid : 0,
                        urec: urec
                    }
                })
                .then(res => {
                    if (res.errcode == "1") {
                        this.$message({
                            type: "success",
                            message: "保存成功!"
                        });
                        this.QueryMenu(this.rptunitid);
                    } else {
                        this.$alert("保存失败!" + res.errmsg, "提示");
                    }
                    //this.Options.rptunitvsallhospreqitem = "1";
                });
        },
        Copy() {
            this.$tool
                .request({
                    url: "MNG/MNG1/MNG139",
                    method: "post",
                    data: {
                        action: "copy",
                        rptunitid1: this.rptunitid,
                        rptunitid2: this.rptunitidcopy
                    }
                })
                .then(res => {
                    if (res.errcode == "1") {
                        this.$message({
                            type: "success",
                            message: "复制成功!"
                        });
                        this.CopyShow = false;
                    } else {
                        this.$alert("复制失败!" + res.msg, "提示");
                    }
                    //this.Options.rptunitvsallhospreqitem = "1";
                });
        },
        userDefineMenuClick() {
            this.userDefineFunctionVisible = true;
            this.userDefineFunctionText = this.$refs.xTable.tableData[this.currentindex].userdefinemenu;
        },
        UserDefineConfirm(){
            this.userDefineFunctionVisible = false;
            this.$refs.xTable.tableData[this.currentindex].userdefinemenu = this.userDefineFunctionText;
        },
        MenuIconClick() {
            this.iconDialogVisible = true;
        },
        SelectIcon(icon) {
            this.$refs.xTable.tableData[this.currentindex].menuicon = icon;
            this.iconDialogVisible = false;
        },
        SetFirst(table) {
            if (table.getCurrentRow()) {
                var currentrow = table.getCurrentRow();
                table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
                table.tableData.splice(0, 0, currentrow);
                this.currentindex = 0;
                this.$nextTick(() => {
                    table.setCurrentRow(currentrow);
                    table.scrollToRow(currentrow);
                });
            }
        },
        SetUp(table) {
            if (this.currentindex > 0) {
                var currentrow = table.getCurrentRow();
                table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
                table.tableData.splice(this.currentindex - 1, 0, currentrow);
                this.currentindex -= 1;
                this.$nextTick(() => {
                    table.setCurrentRow(currentrow);
                    table.scrollToRow(currentrow);
                });
            }
        },
        SetDown(table) {
            if (this.currentindex >= 0 && this.currentindex < table.tableData.length - 1) {
                var currentrow = table.getCurrentRow();
                table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
                table.tableData.splice(this.currentindex + 1, 0, currentrow);
                this.currentindex += 1;
                this.$nextTick(() => {
                    table.setCurrentRow(currentrow);
                    table.scrollToRow(currentrow);
                });
            }
        },
        SetLast(table) {
            if (table.getCurrentRow()) {
                var currentrow = table.getCurrentRow();
                table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
                table.tableData.push(currentrow);
                this.currentindex = table.tableData.length - 1;
                this.$nextTick(() => {
                    table.setCurrentRow(currentrow);
                    table.scrollToRow(currentrow);
                });
            }
        },
        currentChangeEvent({ row, rowIndex }) {
            this.currentindex = rowIndex;
        },
        popMultipleChk(e) {
            console.log("eee", this.rptunitOption);
            let temp = XEUtils.clone(this.rptunitOption, true);
            this.option1 = [];
            this.option2 = [];
            if (e != "") {
                let k = e.split(",");
                for (let i = 0; i < k.length; i++) {
                    let ndata = temp.find(m => m.data.trim() == k[i]);
                    if (ndata != undefined && ndata != null) {
                        this.option2.push(ndata);
                    }
                }
                temp.forEach(item => {
                    if (k.indexOf(item.data + "") < 0) {
                        this.option1.push(item);
                    }
                });
            } else {
                this.option1 = temp;
            }
            console.log("option", this.option1, this.option2);
            this.multichktitle = "报告单元";
            this.dialogMultipleVisible = true;
        },
        closedialog(value, name) {
            if (value != "close") {
                this.rptunitidcopy = value;
            }
            this.dialogMultipleVisible = false;
        },
        DealData(data) {
            var tempdata = data;
            for (let i = 0; i < tempdata.length; i++) {
                tempdata[i].menulevel = tempdata[i].menulevel - 0;
            }
            return tempdata;
        }
    }
};
</script>

<style scoped>
/deep/.el-input.is-disabled .el-input__inner {
    color: black;
}
/deep/.el-checkbox.is-disabled .el-checkbox__label {
    color: black;
}
/deep/.el-textarea.is-disabled .el-textarea__inner {
    color: black;
}
/deep/.vxe-input--wrapper .vxe-input {
    height: auto;
}
.pagetop {
    left: 0;
    right: 0;
    height: 36px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 5px;
}

.middle-left {
    position: absolute;
    height: 100%;
    width: 400px;
    left: 0px;
    top: 0;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 405px;
    right: 0;
    top: 0;
}

table tr td:nth-child(odd) {
    text-align: right;
    white-space: nowrap;
}
table tr td:nth-child(even) {
    text-align: left;
}
table tr td:nth-child(1) {
    width: 80px;
}
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
/deep/.el-checkbox__inner::after {
    border: 2px solid #000000 !important;
    box-sizing: content-box;
    content: "";
    border-left: 0 !important;
    border-top: 0 !important;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
}
/deep/.el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #000000;
    cursor: not-allowed;
}
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner + .el-input.is-disabled .el-input__inner {
    background-color: #ffffff !important;
}

.icon-list{
    overflow: hidden;
    list-style: none;
    padding: 0!important;
    border: 1px solid #eaeefb;
    border-radius: 4px;
}
.icon-list li{
    float: left;
    width: 16.66%;
    text-align: center;
    height: 120px;
    line-height: 120px;
    color: #666;
    font-size: 13px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;
    display: list-item;
}
.icon-list li span{
    line-height: normal;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    color: #99a9bf;
    transition: color .15s linear;
    display: inline-block;
    vertical-align: middle;
}
.icon-list li i{
    display: block;
    font-size: 32px;
    margin-bottom: 15px;
    color: #606266;
    transition: color .15s linear;
}
.icon-list li .icon-name{
    display: inline-block;
    padding: 0 3px;
    height: 1em;
}
</style>